<template>
  <view class="events-page">
    <view class="page-header">
      <view class="header-title">宗亲会活动</view>
      <view class="header-tabs">
        <view
          v-for="(tab, index) in tabs"
          :key="index"
          class="tab-item"
          :class="{ active: currentTab === index }"
          @click="switchTab(index)"
        >
          {{ tab }}
        </view>
      </view>
    </view>

    <view v-if="filteredEvents.length > 0" class="event-list">
      <view
        v-for="(event, index) in filteredEvents"
        :key="index"
        class="event-item"
        @click="viewEventDetail(event)"
      >
        <image class="event-cover" :src="event.image" mode="aspectFill" />
        <view class="event-content">
          <view class="event-status" :class="getStatusClass(event.status)">
            {{ getStatusText(event.status) }}
          </view>
          <view class="event-title">{{ event.title }}</view>
          <view class="event-info">
            <view class="info-item">
              <wd-icon name="clock" size="28rpx" color="#1989fa"></wd-icon>
              <text>{{ event.time }}</text>
            </view>
            <view class="info-item">
              <wd-icon name="location" size="28rpx" color="#1989fa"></wd-icon>
              <text>{{ event.location }}</text>
            </view>
            <view class="info-item">
              <wd-icon name="user" size="28rpx" color="#1989fa"></wd-icon>
              <text>{{ event.participants }}人已报名</text>
            </view>
          </view>
          <view class="event-desc">{{ event.description }}</view>
          <view class="event-footer">
            <view class="event-tags">
              <view v-for="(tag, tagIndex) in event.tags" :key="tagIndex" class="tag">
                {{ tag }}
              </view>
            </view>
            <button
              class="btn-action"
              :class="getActionClass(event.status)"
              @click.stop="handleAction(event)"
            >
              {{ getActionText(event.status) }}
            </button>
          </view>
        </view>
      </view>
    </view>

    <view v-else class="empty-content">
      <image class="empty-image" src="/static/clan/empty-events.png" mode="aspectFit" />
      <text class="empty-text">暂无相关活动</text>
    </view>

    <!-- 加载更多 -->
    <view v-if="hasMore && filteredEvents.length > 0" class="load-more">
      <text v-if="isLoading" class="more-text">加载中...</text>
      <text v-else class="more-text" @click="loadMore">加载更多</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";

// 标签页
const tabs = ["全部活动", "进行中", "已结束", "我参与的"];
const currentTab = ref(0);

// 活动列表
const eventList = ref([
  {
    id: "1",
    title: "2024年宗亲春节联欢会",
    time: "2024-02-10 18:30",
    location: "博阳大酒店宴会厅",
    image: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/0a345d867e234edca9048c330a16887b.png",
    description:
      "一年一度的李氏宗亲春节联欢会，共庆新春佳节，增进宗亲感情。活动包括家族成就展示、才艺表演、家族故事分享等环节。",
    participants: 128,
    status: "ongoing", // 进行中
    isJoined: true,
    tags: ["联欢会", "春节"],
  },
  {
    id: "2",
    title: "宗亲会第三届理事会就职典礼",
    time: "2024-03-15 10:00",
    location: "江西会议中心",
    image: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/0a345d867e234edca9048c330a16887b.png",
    description:
      "李氏宗亲会第三届理事会就职典礼，将选举产生新一届理事会成员，并规划未来三年的宗亲会发展方向。",
    participants: 86,
    status: "upcoming", // 即将开始
    isJoined: false,
    tags: ["理事会", "就职典礼"],
  },
  {
    id: "3",
    title: "宗亲会文化传承研讨会",
    time: "2024-04-20 14:00",
    location: "博阳文化中心",
    image: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/0a345d867e234edca9048c330a16887b.png",
    description:
      "围绕李氏家族文化传承与创新发展进行研讨，邀请文化学者、家族长辈共同探讨家族文化的保护与传承。",
    participants: 56,
    status: "upcoming", // 即将开始
    isJoined: true,
    tags: ["文化传承", "研讨会"],
  },
  {
    id: "4",
    title: "2023年宗亲会年度大会",
    time: "2023-12-20 13:30",
    location: "李氏宗祠大厅",
    image: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/0a345d867e234edca9048c330a16887b.png",
    description: "2023年度李氏宗亲会会员大会，总结全年工作，表彰优秀宗亲，规划来年工作。",
    participants: 152,
    status: "ended", // 已结束
    isJoined: true,
    tags: ["年会", "总结"],
  },
  {
    id: "5",
    title: "李氏家族祭祖大典",
    time: "2023-04-05 09:00",
    location: "李氏祖祠",
    image: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/0a345d867e234edca9048c330a16887b.png",
    description: "清明时节举行的传统祭祖活动，缅怀先祖，传承家风家训，增强家族凝聚力。",
    participants: 215,
    status: "ended", // 已结束
    isJoined: false,
    tags: ["祭祖", "清明"],
  },
]);

// 加载状态
const isLoading = ref(false);
const hasMore = ref(true);
const page = ref(1);

// 根据当前标签过滤活动
const filteredEvents = computed(() => {
  if (currentTab.value === 0) {
    return eventList.value;
  } else if (currentTab.value === 1) {
    return eventList.value.filter(
      (event) => event.status === "ongoing" || event.status === "upcoming"
    );
  } else if (currentTab.value === 2) {
    return eventList.value.filter((event) => event.status === "ended");
  } else {
    return eventList.value.filter((event) => event.isJoined);
  }
});

// 切换标签
const switchTab = (index: number) => {
  currentTab.value = index;
  // 重置分页
  page.value = 1;
  hasMore.value = true;
  loadEvents();
};

// 加载活动数据
const loadEvents = () => {
  // 实际应用中应该调用API获取数据
  // 这里使用模拟数据
  isLoading.value = true;

  setTimeout(() => {
    isLoading.value = false;
    // 模拟没有更多数据
    if (page.value > 1) {
      hasMore.value = false;
    }
  }, 800);
};

// 加载更多
const loadMore = () => {
  if (isLoading.value || !hasMore.value) return;

  page.value++;
  loadEvents();
};

// 获取状态文本
const getStatusText = (status: string) => {
  switch (status) {
    case "upcoming":
      return "即将开始";
    case "ongoing":
      return "进行中";
    case "ended":
      return "已结束";
    default:
      return "未知状态";
  }
};

// 获取状态样式
const getStatusClass = (status: string) => {
  switch (status) {
    case "upcoming":
      return "status-upcoming";
    case "ongoing":
      return "status-ongoing";
    case "ended":
      return "status-ended";
    default:
      return "";
  }
};

// 获取按钮文本
const getActionText = (status: string) => {
  switch (status) {
    case "upcoming":
      return "立即报名";
    case "ongoing":
      return "查看详情";
    case "ended":
      return "活动回顾";
    default:
      return "查看详情";
  }
};

// 获取按钮样式
const getActionClass = (status: string) => {
  switch (status) {
    case "upcoming":
      return "btn-primary";
    case "ongoing":
      return "btn-info";
    case "ended":
      return "btn-default";
    default:
      return "btn-default";
  }
};

// 处理按钮点击
const handleAction = (event: any) => {
  if (event.status === "upcoming") {
    // 报名
    uni.navigateTo({
      url: `/pages/work/clan/event-signup?id=${event.id}`,
    });
  } else {
    // 查看详情
    viewEventDetail(event);
  }
};

// 查看活动详情
const viewEventDetail = (event: any) => {
  uni.navigateTo({
    url: `/pages/work/clan/event?id=${event.id}`,
  });
};

// 页面加载
onMounted(() => {
  loadEvents();
});
</script>

<style lang="scss">
.events-page {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 30rpx;
}

.page-header {
  background-color: #fff;
  padding: 30rpx;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .header-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
  }

  .header-tabs {
    display: flex;
    border-bottom: 1rpx solid #eee;

    .tab-item {
      padding: 20rpx 0;
      margin-right: 50rpx;
      font-size: 28rpx;
      color: #666;
      position: relative;

      &.active {
        color: #1989fa;
        font-weight: 500;

        &::after {
          content: "";
          position: absolute;
          bottom: -1rpx;
          left: 0;
          width: 100%;
          height: 4rpx;
          background-color: #1989fa;
          border-radius: 2rpx;
        }
      }
    }
  }
}

.event-list {
  padding: 20rpx;
}

.event-item {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

  .event-cover {
    width: 100%;
    height: 300rpx;
  }

  .event-content {
    padding: 30rpx;
    position: relative;
  }

  .event-status {
    position: absolute;
    top: -40rpx;
    right: 20rpx;
    padding: 6rpx 16rpx;
    color: #fff;
    font-size: 24rpx;
    border-radius: 6rpx;

    &.status-upcoming {
      background-color: #409eff;
    }

    &.status-ongoing {
      background-color: #67c23a;
    }

    &.status-ended {
      background-color: #909399;
    }
  }

  .event-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    line-height: 1.4;
  }

  .event-info {
    margin-bottom: 20rpx;
    display: flex;
    flex-wrap: wrap;

    .info-item {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      color: #666;
      margin-right: 30rpx;
      margin-bottom: 16rpx;

      text {
        margin-left: 8rpx;
      }
    }
  }

  .event-desc {
    font-size: 26rpx;
    color: #666;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: 24rpx;
  }

  .event-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .event-tags {
      display: flex;
      flex-wrap: wrap;
      flex: 1;

      .tag {
        font-size: 22rpx;
        color: #1989fa;
        background-color: rgba(25, 137, 250, 0.1);
        padding: 6rpx 16rpx;
        border-radius: 6rpx;
        margin-right: 10rpx;
        margin-bottom: 10rpx;
      }
    }

    .btn-action {
      min-width: 160rpx;
      height: 64rpx;
      line-height: 64rpx;
      font-size: 26rpx;
      padding: 0 24rpx;
      border-radius: 32rpx;
      text-align: center;
      margin-left: 20rpx;
      flex-shrink: 0;

      &.btn-primary {
        background-color: #1989fa;
        color: #fff;
      }

      &.btn-info {
        background-color: #67c23a;
        color: #fff;
      }

      &.btn-default {
        background-color: #f5f7fa;
        color: #606266;
        border: 1rpx solid #dcdfe6;
      }
    }
  }
}

.empty-content {
  padding: 120rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  .empty-image {
    width: 240rpx;
    height: 240rpx;
    margin-bottom: 30rpx;
  }

  .empty-text {
    font-size: 28rpx;
    color: #909399;
  }
}

.load-more {
  text-align: center;
  padding: 30rpx 0;

  .more-text {
    font-size: 26rpx;
    color: #909399;
  }
}
</style>
